<template>
  <div class="forms-02-sign-up">
    <div class="text-field-input-blank">
      <div class="text-field-input-blank2">
        <div class="form"></div>
        <div class="enter-text">新密码</div>
      </div>
    </div>
    <div class="text-field-input-blank3">
      <div class="text-field-input-blank2">
        <div class="form"></div>
        <div class="enter-text">确认密码</div>
      </div>
    </div>
    <div class="button-square-1-default-1-primary">
      <div class="group-12">
        <div class="button-color"></div>
        <router-link to="/login" class="button-text">确 认</router-link>
      </div>
    </div>
    <svg
      class="arrow-left"
      width="45"
      height="40"
      viewBox="0 0 45 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.625 20H39.375M18.75 31.6667L5.625 20L18.75 31.6667ZM5.625 20L18.75 8.33337L5.625 20Z"
        stroke="#2E3035"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div class="button-let-talk">
      <div class="rectangle"></div>
      <div class="services">Search</div>
    </div>
    <svg
      class="ic-search"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"
        fill="white"
      />
    </svg>

    <svg
      class="menu"
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
        fill="#D2D5E7"
      />
    </svg>

    <div class="wiredunk"></div>
    <div class="rectangle4"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Priceing</div>
    <div class="sign-up-to-discover">修 改 密 码<br />Change Password</div>
    <div class="wiredunk2">FILMACTION</div>
    <svg
      class="vector2"
      width="18"
      height="16"
      viewBox="0 0 18 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 0V16M14 0V16M0 4H4M14 4H18M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
        stroke="#2E3035"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "Forms02SignUp",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.forms-02-sign-up,
.forms-02-sign-up * {
  box-sizing: border-box;
}
.forms-02-sign-up {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.text-field-input-blank {
  width: 330px;
  height: 48px;
  position: absolute;
  left: 214px;
  top: 344px;
}
.text-field-input-blank2 {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px;
  box-shadow: 0px 2px 7px 0px rgba(210, 222, 227, 0.46);
  overflow: hidden;
}
.form {
  background: #fcfdfe;
  border-radius: 6px;
  border-style: solid;
  border-color: #e9edf4;
  border-width: 1px;
  width: 330px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 0px;
  box-shadow: 0px 2px 7px 0px rgba(210, 222, 227, 0.46);
}
.enter-text {
  color: #acb6be;
  text-align: left;
  font: 400 14px/22px "Open Sans", sans-serif;
  position: absolute;
  left: 20px;
  top: calc(50% - 11px);
}
.text-field-input-blank3 {
  width: 330px;
  height: 48px;
  position: absolute;
  left: 214px;
  top: 407px;
}
.button-square-1-default-1-primary {
  width: 158px;
  height: 48px;
  position: absolute;
  left: 214px;
  top: 477px;
}
.group-12 {
  height: 48px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button-color {
  background: #13c296;
  border-radius: 6px;
  width: 158px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Montserrat", sans-serif;
  position: absolute;
  right: 61px;
  left: 59px;
  bottom: 12px;
  top: 12px;
}
.arrow-left {
  position: absolute;
  left: 54px;
  top: 37px;
  overflow: visible;
}
.button-let-talk {
  width: 160px;
  height: 54px;
  position: absolute;
  left: 1054px;
  top: 33px;
  overflow: hidden;
}
.rectangle {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 160px;
  height: 54px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 51px;
  top: 18px;
}
.ic-search {
  position: absolute;
  left: 1236px;
  top: 50px;
  overflow: visible;
}
.menu {
  position: absolute;
  left: 1279px;
  top: 40px;
  overflow: visible;
}
.wiredunk {
  color: #212b36;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 214px;
  top: calc(50% - -307px);
}
.rectangle4 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -660px;
  top: 648px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 206px;
  top: 679px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 381px;
  top: 679px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 478px;
  top: 679px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 289px;
  top: 679px;
}
.sign-up-to-discover {
  color: #212b36;
  text-align: left;
  font: 600 40px/48px "Montserrat", sans-serif;
  position: absolute;
  left: 218px;
  top: 190px;
  width: 397px;
  height: 108px;
}
.wiredunk2 {
  color: #151828;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 218px;
  top: calc(50% - 358px);
}
.vector2 {
  position: absolute;
  left: 188px;
  top: 48px;
  overflow: visible;
}
</style>
